// @ts-nocheck
import React, { Component } from 'react';
import axios from 'axios'

class Search extends Component {

  search = async () => {
    try {
      // 获取用户输入 发送请求
    const {keyWordElement: {value: keyword}} = this
    // console.log (keyword)
    this.props.updateAppState ({isFirst: false,isLoading: true })
    const {data: res} = await axios.get (`http://localhost:3000/api1/search/users?q=${keyword}`)
    // 传给APP
    this.props.updateAppState ({isFirst: false,isLoading: false, users: res.items })
    } catch (e) {
      this.props.updateAppState ({isLoading: false, err: e.message })
    }
  }

  render() {
    return (
      <section className="jumbotron">
      <h3 className="jumbotron-heading">Search Github Users</h3>
      <div>
        <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search"/>&nbsp;
        <button onClick={this.search}>Search</button>
      </div>
      </section>
    )
  }
}


export default Search;
